<template>
  <div class="ak-table" ref="akTableBox">
    <el-table
      v-loading="tableLoding"
      :data="tableData | delNull(addList)"
      tooltip-effect="dark"
      :row-style="trStyle"
      empty-text="暂无数据"
      :fit="true"
      stripe
      ref="elTable"
      :border="border"
      @sort-change="sortChangeT"
      @filter-change="filterTag"
      style="width: 100%"
    >
      <el-table-column
        v-for="(item, index) in addList"
        :fixed="fixed ? index == 0 : false"
        :key="item"
        :prop="item"
        :label="labelObj[item]"
        :filters="filterListObj && filterListObj[item]"
        :column-key="item"
        :width="getItemWidth(addList, item, index)"
        align="center"
        show-overflow-tooltip
        :sortable="
          index <= 0 || sortAttr === undefined || sortAttr[item] == undefined
            ? false
            : sortAttr[item]
        "
      >
        <template slot-scope="scope">
          <div class="flex-content">
            <div
              class="text-hidden"
              :style="
                scope.column.property == checkedIdAttr ||
                agencyAttrList.includes(item)
                  ? 'cursor: pointer'
                  : ''
              "
              @click.stop="
                handleClick(
                  scope,
                  item,
                  routeAreaType == 5 && index == 0 ? 1 : 0
                )
              "
            >
              <span v-if="fixedTwoList.includes(item) && scope.row[item]">
                {{
                  scope.row[item].toString().indexOf('%') !== -1
                    ? scope.row[item]
                    : parseInt(scope.row[item] * 100) / 100 + '%'
                }}
              </span>
              <span v-else :class="index > 0 ? getWaring(scope.row, item) : ''">
                {{ scope.row[item] }}</span
              >
            </div>
            <!-- 指标 -->
            <div
              v-if="routeAreaType == 5 && index == 0 && scope.row.type == 2"
              class="indicator"
              @click.stop="handleClick(scope, item, 2)"
            ></div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapMutations: mapMutationsForm } = createNamespacedHelpers('gisForm')
export default {
  name: 'AkTable',
  props: {
    labelObj: {
      type: Object,
      required: true,
      default: () => {}
    },
    addList: {
      type: Array,
      required: true,
      default: () => []
    },
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    sortAttr: {
      type: Object,
      default: () => undefined
    },
    checkedId: {
      default: () => null
    },
    checkedIdAttr: {
      type: String,
      default: () => null
    },
    // 代理属性点击列表
    agencyAttrList: {
      type: Array,
      default: () => []
    },
    tableLoding: {
      type: Boolean,
      default: () => false
    },
    fixed: {
      default: () => false
    },
    border: {
      default: () => true
    },
    routeAreaType: {
      default: () => 0
    },
    filterListObj: {
      type: Object,
      default: () => {}
    }
  },
  data: () => ({
    height: 0,
    tableAgencyData: [],
    // 需要保留两位的属性字段数组
    fixedTwoList: [
      'mobileCoverRate',
      'unicomCoverRate',
      'telecomCoverRate'
      // 'mobileUserRatio',
      // 'unicomUserRatio',
      // 'telecomUserRatio',
      // 'mobileContrastRatio',
      // 'unicomContrastRatio',
      // 'telecomContrastRatio'
    ]
  }),
  filters: {
    delNull(nv, addList) {
      let list = []
      if (nv) {
        // 去掉关键属性为null的无效字段
        nv.forEach(item => {
          if (item[addList[0]]) {
            list.push(item)
          }
        })
      }
      return list
    }
  },
  watch: {
    // 'tableData'(nv) {
    //   if(nv) {
    //   }
    // }
  },
  created() {},
  computed: {},
  methods: {
    ...mapMutationsForm(['setTownId', 'setZoneId']),
    //getWidth 根据条件返回相应的宽度，优化三元表达式
    getItemWidth(addList, item, index) {
      // addList.length > 1 ? addList.length > 2 ? index == 0 || item == 'eci' || item == 'gridId' ? '120': '100' : '114': '228'
      if (addList.length == 1) {
        return '228'
      }
      if (addList.length == 2) {
        if (item.includes('UserDifference')) {
          return '160'
        }
        return '114'
      }
      if (addList.length > 2) {
        if (index == 0 || item == 'eci' || item == 'gridId') {
          return '120'
        }
        if (item.includes('UserRatio') || item.includes('ContrastRatio')) {
          return '140'
        }
        if (item.includes('Num')) {
          return '80'
        }
        return '100'
      }
    },
    getWaring(row, item) {
      //如果是集团预警和鳗鱼预警，则需要特殊处理（变色）
      let differenceWarning = row['differenceWarning'],
        ratioWarning = row['ratioWarning']
      if (
        (differenceWarning || ratioWarning) &&
        (item == 'mobileContrastRatio' || item == 'mobileUserDifference')
      ) {
        return 'text-red'
      } else {
        return ''
      }
    },
    // 初始化需要sort的对象

    // 排序
    sortChangeT(e) {
      console.log(e)
      let sortType = e.order != null ? (e.order == 'ascending' ? 1 : 2) : null
      this.$emit('changeSort', { sortType, sortStr: e.prop })
    },
    // 点击回调
    handleClick(e, attrStr, status) {
      if (
        e.column.property == this.checkedIdAttr ||
        this.agencyAttrList.includes(attrStr)
      ) {
        const { type } = e.row
        const id = e.row[this.checkedIdAttr]
        if (this.routeAreaType == 5) {
          if (id) {
            if (type == 2) {
              this.$emit('changeCId', id, status, e)
              if (status) {
                this.setTownId({ data: id, status })
              }
            } else if (type == 1) {
              if (status) {
                this.setZoneId({ data: id, getBoundary: true })
              }
            }
          }
        } else {
          this.$emit('changeCId', id, e)
        }
      }
    },

    // 选中样式
    trStyle(e) {
      if (this.checkedId && this.checkedId == e.row[this.checkedIdAttr]) {
        return { background: '#C8E1FF' }
      }
    },
    filterTag(data) {
      this.$emit('filterChange', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.ak-table {
  width: 100%;
  min-width: 120px;
}
.flex-content {
  display: flex;
  align-items: center;
}
.indicator {
  cursor: pointer;
  color: #4a70af;
}
//文字溢出隐藏
::v-deep .text-hidden {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
::v-deep .text-red {
  color: red;
}
.indicator::after {
  content: '指标';
  cursor: pointer;
  color: #4a70af;
}
</style>
